<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>车罐详细信息页面</title>

    <link rel="stylesheet" type="text/css" href="../../easyui/jquery-easyui-1.4.4/themes/default/easyui.css"/>
    <link rel="stylesheet" type="text/css" href="../../easyui/jquery-easyui-1.4.4/themes/icon.css"/>

    <script type="text/javascript" src="../../jquery/jquery-3.2.1.min.js"></script>
    <script type="text/javascript" src="../../easyui/jquery-easyui-1.4.4/jquery.easyui.min.js"></script>


    <style type="text/css">
        * {
          font-size:14px;
        }
        label{
            font-weight: bolder;
        }
        span{
            color: rgba(0, 0, 0, 0.56);
        }
        div{
            vertical-align:top;
        }
        .eye-catching{
            color: #0e8cd2;
            font-weight: bolder;
        }
        .tankCarList{
            list-style:none;
            padding:10px;
        }
        .tankCarInfo{
            border:1px solid #bce8f1;
            border-radius: 5px;
            padding:10px;
            margin:10px auto;
            box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.15);
        }
        .tankCarInfo > div{
            display: inline-block;
            min-height:50px;
            margin:0px 0px 10px 0px;
        }
        .carHead{
            width:48%;
            padding:3px;
        }
        .carHead >div{
            margin:5px 10px;
            display: inline-block;
            float:left;

        }
        .carHead .address{
            min-width:300px;
        }
        .carTail{
            width:49%;
        }
        .carTail >div{
            margin:5px 10px;
            display: inline-block;
            float:left;

        }
        .tankProgress{
            min-width:280px;
        }
        .tankCarDetail{
            border:1px solid #ffd46f;
            border-top: none;
            border-radius: 5px;
            padding:10px;
            margin:-10px 20px 10px 20px;
            box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.15);
            display:none;
            width:calc(100% - 70px);
            overflow: hidden;
        }
        .tankCarDetail > div{
            margin:5px 10px;
            display: inline-block;
            float:left;
        }
        @media only screen and (max-width: 680px) {
            .tankCarInfo > div{
                display: block;

            }
            .carHead{
                width:100%;
                float:none;
            }
            .carTail{
                width:100%;
            }
        }
        .tankCarDetailBtn{
            width:65px;
            background: url('images/dropdown.png') no-repeat;
            background-size:20px;
            padding:0px 0px 0px 22px;
            display: block;
            color:#ffd46f;
            font-weight: bolder;
        }
    </style>
    <script type="text/javascript">
        $(function(){
            $('.tankCarInfo .tankCarDetailBtn').click(function(){
                show($(this).parent().next('.tankCarDetail'));

            });
        });

        function show($dom){
            if($dom.data("show")){
                $dom.fadeOut(100);
                $dom.data("show",false);
            }else{
                $dom.fadeIn();
                $dom.data("show",true);
            }


        }
    </script>
</head>
<body>
    <ul class="tankCarList">
        <li class="tankCarInfo">
            <a class="tankCarDetailBtn" href="javascript:void(0);">
                查看详细
            </a>
        </li>
        <li class="tankCarDetail">

        </li>
        <li class="tankCarInfo">
            <div class="carHead">
                <div style="display: block;float:none;">
                    <span class="eye-catching">冀RV730</span>
                </div>
                <div>
                    <label>司机:</label>
                    <span>玉小刚</span>
                </div>
                <div>
                    <label>总里程:</label>
                    <span>78051.1</span>
                </div>
                <div>
                    <label>总油耗:</label>
                    <span>25714</span>
                </div>
                <div class="address">
                    <label>地理位置:</label>
                    <span>天津市/天津市/西青区</span>
                </div>
                <div style="width:100%;display: block;float: left;">
                    <span style="color: #00c700;font-weight: bolder;">行驶中</span>
                </div>
            </div>
            <div class="carTail">
                <div style="display:block;float: none;">
                    <span class="eye-catching">冀RV730挂</span>
                    <p>视联智能测试车载1号罐</p>
                </div>
                <p class="tankProgress easyui-progressbar" data-options="value:70"></p>
                <div>
                    <label>剩余容积:</label>
                    <span>30%</span>
                </div>
                <div>
                    <label>剩余气量:</label>
                    <span>0.123123</span>
                </div>
                <div>
                    <label>储罐压力:</label>
                    <span>3.123123</span>
                </div>

            </div>
            <a class="tankCarDetailBtn" href="javascript:void(0);">
                查看详细
            </a>
        </li>
        <li class="tankCarDetail">
            <div>
                <label>发动机转速:</label>
                <span>580</span>
            </div>
            <div>
                <label>车速:</label>
                <span>2.66</span>
            </div>
            <div>
                <label>水温:</label>
                <span>80</span>
            </div>
            <div>
                <label>瞬时油耗:</label>
                <span>4.5</span>
            </div>
            <div>
                <label>扭矩:</label>
                <span>16</span>
            </div>
            <div>
                <label>经度:</label>
                <span>116.98433</span>
            </div>
            <div>
                <label>纬度:</label>
                <span>39.16876</span>
            </div>
            <div>
                <label>GPS速度:</label>
                <span>0</span>
            </div>
            <div>
                <label>方向:</label>
                <span>84</span>
            </div>
            <div>
                <label>海拔:</label>
                <span>-9</span>
            </div>
            <div>
                <label>油门:</label>
                <span>5.6</span>
            </div>
            <div>
                <label>档位:</label>
                <span>1</span>
            </div>
            <div>
                <label>GPS标记:</label>
                <span>41</span>
            </div>
            <div>
                <label>can数据标记:</label>
                <span>41</span>
            </div>
            <div>
                <label>剩余油量:</label>
                <span>0</span>
            </div>
            <div>
                <label>发动机工作时间:</label>
                <span>2071.69</span>
            </div>
        </li>
    </ul>
</body>
</html>